<template>
  <div class="flex">
    <div class="flex-left">
      <div class="title">
        <span class="line"></span>
        <p>要闻</p>
      </div>
      <a v-if='getIndexYWFirst' :href="keyUrl+getIndexYWFirst.url"><img :src="keyUrl+getIndexYWFirst.image"></a>
      <ul class="list">
        <li v-for='(item,index) in getIndexYW' :key='index'>
          <a :href='keyUrl+item.url'>
            <span class="dot"></span>
            <p>{{item.title}}</p>
          </a>
        </li>
      </ul>
      <div class="title">
        <span class="line"></span>
        <p>国际足球深度策划</p>
      </div>
      <a v-if='getIndexChFirst' :href="keyUrl+getIndexChFirst.url"><img :src="keyUrl+getIndexChFirst.image"></a>
      <ul class="list">
        <li v-for='(item,index) in getIndexCh' :key='index'>
          <a :href='keyUrl+item.url'>
            <span class="dot"></span>
            <p>{{item.title}}</p>
          </a>
        </li>
      </ul>
    </div>
    <div class="flex-con">
      <div class="banner">
        <swiper :options="swiperOption" ref="mySwiper" v-if="banner.length>0">
          <!-- slides -->
          <swiper-slide v-for='(item,index) in banner' :key='index'><a :href="keyUrl+item.url"
              ><img :src="keyUrl+(item.image.replace('-lp',''))"></a></swiper-slide>
          <!-- Optional controls -->
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
      <div class="box-com">
        <template v-for='(item,key) in getIndexOthers'>
          <div class="box">
            <h3><a v-if='item[0].url' :href="keyUrl+item[0].url">{{item[0].title}}</a></h3>
            <div class="box-flex clearfix">
              <a v-if='item[0].url' :href="keyUrl+item[0].url"><img :src="keyUrl+item[0].image"></a>
              <ul>
                <li v-for='(items,index) in item'>
                  <a :href="keyUrl+items.url">
                    <span class="dot"></span>
                    <p>{{items.title}}</p>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="flex-right">
      <div class="title">
        <span class="line"></span>
        <p>热门专题</p>
      </div>
      <ul class="img-list">
        <li v-for='(item,index) in getIndexHots' :key='index'><a :href="keyUrl+item.url"><img :src="keyUrl+item.image">
            <p>{{item.title}}</p>
          </a></li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {
    getIndexYwch,
    getIndexBanner,
    getIndexHot,
    getIndexOther
  } from '@/request/api'

  import {
    swiper,
    swiperSlide
  } from 'vue-awesome-swiper'

  export default {
    components: {
      swiper,
      swiperSlide
    },

    data() {
      return {
        /*swiperOption: {
          autoplay: {
            delay: 3000,
            disableOnInteraction: false,
            //stopOnLastSlide: false
          },
          loop: true,
          pagination: {
            el: '.swiper-pagination'
          },
          observeParents: true,
          observer: true
        }*/
        swiperOption: {
          autoplay: true,
          autoplay: {
            delay: 1500,
            disableOnInteraction: true
          },
          observeParents: true,
          observer: true,

          speed: 1000,
          loop: true,
          watchOverflow: false,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        },
        getIndexYWFirst: {},
        getIndexChFirst: {},
        getIndexYW: [],
        getIndexCh: [],
        banner: [],
        getIndexHots: [],
        getIndexOthers: [],

      };
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    methods: {

    },
    created() {
      getIndexYwch().then((v) => {
        let data = v.data;
        this.getIndexYWFirst = data.slice(0, 1)[0]
        this.getIndexChFirst = data.slice(5, 6)[0]
        this.getIndexCh = data.slice(6);
        this.getIndexYW = data.slice(1, 5);
      })
      getIndexBanner().then((v) => {
        let data = v.data;
        this.banner = data;
      })
      getIndexHot().then((v) => {
        let data = v.data;
        this.getIndexHots = data;
      })
      getIndexOther().then((v) => {
        let data = v.data;
        let len = Math.ceil(data.length / 4)
        let arr = new Array(len);
        data.forEach((item, index) => {
          let ss = Math.floor(index / 4); //取商
          let ys = (index) % 4; //取余
          if (ys == 0) {
            arr[ss] = new Array()
          };
          arr[ss].push(item)
        })
        this.getIndexOthers = arr
      })

    },
    mounted() {
      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      //this.swiper.slideTo(0, 555000, false)
    }
  };

</script>

<style lang='scss' scoped>
  .flex /deep/ {
    .swiper-pagination {
      text-align: right;
      width: 95%;
      bottom: 30px;

      .swiper-pagination-bullet-active {
        background: #fff;
      }

    }
  }

  .swiper-button-next {
    background-image: url('../assets/img/right.png');
  }

  .swiper-button-prev {
    background-image: url('../assets/img/left.png');

  }

  @import url(../assets/css/home.css);

</style>
